<template>
	<view>
		<view class="rider_list">
			<view class="rider_item" v-for="(it_r,in_r) in riderPersionList" :key="in_r">
				<view class="l-wrap" @click="handleChooseRider(it_r)">
					<view v-if="!it_r.choosed" class="icon">
						<image src="@/static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
					</view>
					<view v-else class="icon">
						<image src="@/static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<text class="name ellispsis1">{{it_r.passengerName}}</text>
					<text class="type" v-if="it_r.typeName">{{it_r.type}}</text>
					<text class="ID">{{it_r.certificateNumber}}</text>
				</view>
				<view class="edit-icon" @click="handleGoBusAddRider(it_r)">
					<image src="@/static/imgs/icons/edit-icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="center_combo tp-h98" v-if="showLoadMore">{{loadMoreText}}</view>
		<view class="tp-h98"> </view>
		
		<view class="confirm-btn-wrap">
			<view class="confirm-btn tp-w690">
				<view class="btn add" @click="handleGoBusAddRider">添加乘车人</view>
				<view class="btn confirm" @click="handleConfirmChoosedRider">确定</view>
				<view class="btn del" @click="handleDelChoosedRider">删除</view>
			</view>
		</view>

		<uni-popup ref="modalBox" :maskClick="false" type="center">
			<view class="modal_box-wrap">
				<view class="alert-icon">
					<image src="@/static/imgs/icons/alert-icon.png" mode=""></image>
				</view>
				<view class="p">是否确认删除？</view>
				<view class="btns-wrap">
					<view class="btn cancel" @click="handleCloseModalBox">取消</view>
					<view class="btn confirm" @click="handleConfirmDelRider">确认</view>
				</view>
				<uni-icons @click="handleCloseModalBox" class="close-icon" type="close" size="30" color="#999"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				riderPersionList: [],
				curRiderPersonInfo: {},
				notBus: 1, // 非班车添加乘车人信息 （1非班车0班车）
				isBus: null, // 1 大巴 2 拼车
				shiftsId: '', // 班次id
				maxNum: '', // 最多可以选择几个
				scene: '', // 场景类型 0.班车 1.接车
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 20,
					last_page: 2
				},
				goType: '', //   出发站是否是机场 0.是 1.否
				backType: '', // 	终点站是否是机场 0.是 1.否

				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		onLoad(opt) {
			this.notBus = opt && opt.notBus
			this.isBus = opt && opt.isBus
			this.shiftsId = opt && opt.shiftsId
			this.maxNum = opt && opt.maxNum
			this.scene = opt && opt.scene
			this.goType = opt && opt.goType
			this.backType = opt && opt.backType
			uni.showLoading({
				title: '加载中'
			});
		},
		onShow() {
			this.getRiderList()
		},
		// 上拉触底
		onReachBottom() {
				this.showLoadMore = true;
			if (this.page.pageNum < this.page.last_page) {
				this.page.pageNum++
				this.getRiderList();
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			getRiderList() { // onshow 获取乘客完整信息
				// this.page.pageNum = 1
				let api = this.$api.getRiderList + '?shiftsId=' + this.shiftsId + '&type=' + this.isBus + '&scene=' + this.scene
				if (this.notBus) {
					api = this.$api.getCommonRiderList
				}
				let {
					pageSize,
					pageNum
				} = this.page
				this.$http.get(api, {
					pageSize,
					pageNum
				}).then(res => {
					if (res.code === 200) {
						// this.riderPersionList = [{id:1,name:'金小鱼',type:'成人',ID:'410235649978531563', choosed: false}]
						res.data.result.map(item => {
							if (api === this.$api.getRiderList + '?shiftsId=' + this.shiftsId + '&type=' + this.isBus + '&scene=' + this
								.scene) {
								item.ID = item.idNumber
							} else {
								item.ID = item.certificateNumber
								item.name = item.passengerName
							}
							item.choosed = false
						})
						this.page.totalPageNum = res.data.total
						this.page.last_page = Math.ceil(this.page.totalPageNum / 20)
						if (this.page.pageNum > 1) {
							this.riderPersionList = this.riderPersionList.concat(res.data.result);
						} else {
							this.riderPersionList = res.data.result
						}
						// this.riderPersionList = res.data.result
						this.updateRiderList()
					}
				})
			},
			getMoreRiderList() { // onshow 获取乘客完整信息
				let api = this.$api.getRiderList + '?shiftsId=' + this.shiftsId + '&type=' + this.isBus + '&scene=' + this.scene
				if (this.notBus) {
					api = this.$api.getCommonRiderList
				}
				let {
					pageSize,
					pageNum
				} = this.page
				this.$http.get(api, {
					pageSize,
					pageNum
				}).then(res => {
					if (res.code === 200) {
						res.data.result.map(item => {
							if (api === this.$api.getRiderList + '?shiftsId=' + this.shiftsId + '&type=' + this.isBus + '&scene=' + this
								.scene) {
								item.ID = item.idNumber
							} else {
								item.ID = item.certificateNumber
								item.name = item.passengerName
							}
							item.choosed = false
						})
						this.riderPersionList = [...this.riderPersionList, res.data.result]
						this.updateRiderList()
					}
				})
			},
			handleChooseRider(item) {
				return item.choosed = !item.choosed
			},
			// 添加编辑联系人
			handleGoBusAddRider(item) {
				if (!this.notBus) { // 判断是进入班车新增乘客信息页面还是非班车
					uni.navigateTo({
						url: './bus.addRider?id=' + item.id + '&shiftsId=' + this.shiftsId + '&scene=' + this.scene + '&goType=' + this
							.goType + '&backType=' + this.backType
					});
				} else {
					uni.navigateTo({
						url: './common.addRider?id=' + item.id
					});
				}
			},
			// 选取乘车人 确定
			handleConfirmChoosedRider() {
				let arr = this.$store.getters.getRiderList
				let checkNum = 0
				// if( arr.length > this.maxNum){
				// 	return uni.showToast({title: '当前要添加乘客数量超出预选！',icon: 'none'})
				// }
				// console.log(arr);
				this.riderPersionList.forEach((item, index) => {
					if (item.choosed) {
						checkNum++
						this.$store.commit('upRiderList', item)
					} else {
						arr.forEach((it_, in_) => {
							if (it_.id == item.id) {
								this.$store.commit('delRiderList', in_)
							}
						})
					}
				})
				if (this.maxNum && checkNum > this.maxNum) return uni.showToast({
					title: '当前要添加乘客数量超出预选！',
					icon: 'none'
				})
				uni.navigateBack({
					delta: 1
				});
			},
			handleDelChoosedRider() {
				this.$refs.modalBox.open()
			},
			updateRiderList() {
				const storage = this.$store.getters.getRiderList
				const arr = this.riderPersionList
				arr.forEach((it_a, in_a) => {
					storage.forEach((it_s, in_s) => {
						if (it_a.id === it_s.id) {
							return it_a.choosed = true
						}
					})
				})
				uni.hideLoading()
			},
			handleCloseModalBox() {
				this.$refs.modalBox.close()
			},
			// 删除确认
			handleConfirmDelRider() {
				let arr = []
				this.riderPersionList.forEach(item => {
					if (item.choosed) {
						arr.push(item.id)
					}
				})
				let ids = arr.join()

				let api = this.$api.delRider
				if (this.notBus == 1) {
					api = this.$api.delCommonRider
				}
				this.$http.delete(api + '?passengerId=' + ids).then(res => {
					if (res.code === 200) {
						if (this.$store.getters.getRiderList.length) {
							arr.forEach((id, index) => {
								this.$store.getters.getRiderList.forEach((it_, in_) => {
									if (id === it_.id) {
										this.$store.commit('delRiderList', in_) // 删除本地信息
										this.getRiderList()
										this.handleCloseModalBox()
									}
								})
							})
						} else {
							this.getRiderList()
							this.handleCloseModalBox()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rider_list {
		width: 690rpx;
		margin: 20rpx auto 98rpx;
		border-radius: 12rpx;
		background-color: #fff;
		overflow: hidden;

		.rider_item {
			height: 100rpx;
			display: flex;
			margin: 0 30rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ebebeb;

			&:last-child {
				border-bottom: none;
			}

			.l-wrap {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.name {
					font-size: 30rpx;
					padding: 0 10rpx 0 20rpx;
					width: 120rpx;
				}

				.type {
					padding-right: 40rpx;
				}

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
				}
			}
		}
	}

	.confirm-btn-wrap {
		height: 98rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.confirm-btn {
			display: flex;
			justify-content: space-between;

			.btn {
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				width: 214rpx;
				margin: 13rpx auto;
				color: #fff;
				font-size: 32rpx;
				border-radius: 12rpx;

				&.confirm {
					background-color: $blue;
				}

				&.add {
					background-color: $yellow;
				}

				&.del {
					border: 1px solid $red;
					color: $red;
				}
			}
		}
	}

	.modal_box-wrap {
		background-color: #fff;
		width: 582rpx;
		border-radius: 20rpx;
		padding: 80rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;

		.alert-icon {
			width: 118rpx;
			height: 138rpx;
		}

		.p {
			padding: 40rpx 0 60rpx;
			font-size: 30rpx;
		}

		.btns-wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 218rpx;
				height: 73rpx;
				line-height: 73rpx;
				text-align: center;
				border-radius: 37px;
				font-size: 28rpx;

				&.cancel {
					border: 1px solid #ccc;
					color: #ccc;
				}

				&.confirm {
					background-color: $blue;
					color: #fff;
				}
			}
		}

		.close-icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 2;
		}
	}
</style>
